<template>
  <div class="file-detail">
    <a-row align="stretch" class="file-detail__wrap">
      <a-col >
        <div class="file-detail__right">
          <a-descriptions title="文件详情" :column="1" size="mini" table-layout="fixed" layout="inline-horizontal">
            <a-descriptions-item label="名称：">{{fileInfo.name}}</a-descriptions-item>
            <a-descriptions-item label="类型：">{{fileInfo.extendName}}</a-descriptions-item>
            <a-descriptions-item label="文件大小：">{{fileInfo.size}}KB</a-descriptions-item>
            <a-descriptions-item label="创建时间：">{{fileInfo.updateTime}}</a-descriptions-item>
            <a-descriptions-item label="文件ID：">{{fileInfo.fileId}}</a-descriptions-item>
            <a-descriptions-item label="标签：">
              <a-space wrap>
                <a-tag  v-for="item in fileInfo.tags" :key="item" size="small" color="orangered">{{item}}</a-tag>
          
              </a-space>
            </a-descriptions-item>
            <!-- <a-descriptions-item label="说明：">
              基于 v-viewer vue3 实现自定义按钮的图片预览，其他功能可自行扩展
            </a-descriptions-item> -->
          </a-descriptions>
        

          <a-row justify="end" style="margin-top: 30px">
                <a-button type="primary" @click="back">返回</a-button>
          </a-row>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { fileDetail } from "@/apis/file"


defineOptions({ name: 'FileDetail' })
const router = useRouter()

const route = useRoute()

const fileId  = route.query.fileId as string

const fileInfo = ref({})


const loadDetail = async () => {
   const  res =  await fileDetail(fileId)
   fileInfo.value = res.data
  
}

onMounted(() =>{
  loadDetail()
})


const back = () => {
  router.back()
}
</script>

<style lang="scss" scoped>
:deep(.arco-descriptions) {
  .arco-descriptions-title {
    margin-bottom: 12px;
  }

  .arco-descriptions-item {
    display: flex;
    margin-bottom: 8px;

    .arco-descriptions-item-label-inline {
      white-space: nowrap;
      font-size: 12px;
    }

    .arco-descriptions-item-value-inline {
      font-size: 12px;
    }
  }
}

.file-detail {
  padding: $padding;
  padding-bottom: 0;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;

  &__wrap {
    height: 100%;
  }

  &__left,
  &__right {
    background-color: var(--color-bg-1);
    padding: $padding;
    box-sizing: border-box;
    overflow: hidden;
    box-sizing: border-box;
  }

  &__left {
    height: 100%;
    display: flex;
    flex-direction: column;

    .view-box {
      min-height: 400px;
      flex: 1;
      overflow: hidden;
      margin-top: $margin;
    }
  }

  &__right {
    // width: 300px;
    // height: fit-content;
    // margin: $margin;
    // margin-left: 0;
  }
}
</style>
